<template>
  <div>
    <el-dialog
      title="产品信息"
      :visible.sync="visible"
      width="50%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              样例图
            </template>
            <el-avatar
              shape="square"
              :src="qualificationInfo.product.imageUrl"
            ></el-avatar>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              当前状态
            </template>
            <el-tag type="success"> 通过审批 </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              产品名称
            </template>
            {{ qualificationInfo.product.productName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              物料编码
            </template>
            {{ qualificationInfo.product.productCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets" />
              规格型号
            </template>
            {{ qualificationInfo.product.productModel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              计量单位
            </template>
            {{ qualificationInfo.product.productUnit }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              审批人
            </template>
            {{ qualificationInfo.purchaser.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              联系方式
            </template>
            {{ qualificationInfo.purchaser.mobilePhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              申请时间
            </template>
            {{ qualificationInfo.applyTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              审批时间
            </template>
            {{ qualificationInfo.verifyTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    data: {
      type: Object,
    },
  },

  data() {
    return {
      qualificationInfo: {
        product: {
          id: "",
          productName: "",
          productCode: "",
          productUnit: "",
          productModel: "",
          imageUrl: "",
          createTime: "",
          updateTime: "",
        },
        purchaser: {
          accountId: "",
          username: "",
          mobilePhone: "",
        },
        applyTime: "",
        verifyTime: "",
      },
    };
  },

  computed: {
    // business(){
    //   const res = this.productInfo.productTypes.map(typeInfo => {
    //     return typeInfo.productType;
    //   });
    //   return res.join(",");
    // }
  },
  methods: {
    open() {
      this.qualificationInfo = this.data;
    },
    cancel() {
      this.initproductInfo();
      this.$emit("cancel");
    },
    initproductInfo() {
      this.qualificationInfo = {
        product: {
          id: "",
          productName: "",
          productCode: "",
          productUnit: "",
          productModel: "",
          imageUrl: "",
          createTime: "",
          updateTime: "",
        },
        purchaser: {
          accountId: "",
          username: "",
          mobilePhone: "",
        },
        applyTime: "",
        verifyTime: "",
      };
    },
  },
};
</script>

<style>
</style>
